<template>
  <div class="secondary-page-mode">
      <div class="secondary-toolbar">
           <span>日期 : </span>
           <div class="layoutBox" style="width:242px">
            <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </div>&emsp;&emsp;
          <el-button><i class="iconfont icon-sousuo"></i>查询</el-button>
           <el-button type="delet"><i class="iconfont icon-daochu"></i>导出</el-button>
      </div>
      <div class="currency-mode-wrap">
            <el-table
              :data="tableData"
              border
              :span-method="objectSpanMethod"
              style="width: 100%">
              <el-table-column
                type="index"
                label="序号"
                :index="indexMethod"
                width="50">
              </el-table-column>
              <el-table-column
                prop="prop1"
                label="省份">               
              </el-table-column>
               <el-table-column
                prop="prop2"
                label="流域">
              </el-table-column>
               <el-table-column
                prop="prop3"
                label="断面名称">
               
              </el-table-column>
               <el-table-column
                prop="prop4"
                label="电源故障数(个)">
              </el-table-column>
               <el-table-column
                prop="prop5"
                label="仪器故障数(个)">
              </el-table-column>
               <el-table-column
                prop="prop6"
                label="仪器通信故障数(个)">
              </el-table-column>
               <el-table-column
                prop="prop7"
                label="仪器离线数(个)">
              </el-table-column>
              <el-table-column
                prop="prop8"
                label="取水故障数(个)">
              </el-table-column>
               <el-table-column
                label="详情">
                      <template>
                        <div>
                            <el-button type="secondBtn" @click="visiDialog=true">查阅详情</el-button>
                        </div>
                      </template>
              </el-table-column>
            </el-table>
      </div>
    <el-dialog :visible.sync="visiDialog"  width="800px" title="试剂及标准样品更换" :before-close="closess">
       <div  style="height:500px">
           <el-table
              :data="detailTabledata"
              border
              style="width: 100%">
              <el-table-column
                type="index"
                :index="indexMethod"
                width="50">
              </el-table-column>
              <el-table-column
                prop="date"
                label="监测时间">
              </el-table-column>
              <el-table-column
                prop="person"
                label="监测因子">
              </el-table-column>
               <el-table-column
                prop="person"
                label="监测值标识">
              </el-table-column>
          </el-table>
       </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      visiDialog:false,
      dateRange: "",
      tableData: [
        {
          prop1: "内蒙古自治区",
          prop2: '松花江流域',
          prop3: 1,
          prop4: 1,
          prop5: 1,
          prop6: 1,
          prop7: 1,
          prop8: 1,
          prop9: 1
        },
        {
          prop1: "内蒙古自治区",
          prop2: '松花江流域',
          prop3: 1,
          prop4: 1,
          prop5: 1,
          prop6: 1,
          prop7: 1,
          prop8: 1,
          prop9: 1
        },
        {
          prop1: "内蒙古自治区",
          prop2: '松花江流域',
          prop3: 1,
          prop4: 1,
          prop5: 1,
          prop6: 1,
          prop7: 1,
          prop8: 1,
          prop9: 1
        },
        {
          prop1: "内蒙古自治区",
          prop2: '松花江流域',
          prop3: 1,
          prop4: 1,
          prop5: 1,
          prop6: 1,
          prop7: 1,
          prop8: 1,
          prop9: 1
        },
        {
          prop1: "内蒙古自治区",
          prop2: '黄河流域',
          prop3: 1,
          prop4: 1,
          prop5: 1,
          prop6: 1,
          prop7: 1,
          prop8: 1,
          prop9: 1
        },
        {
          prop1: "辽宁省",
          prop2: '辽河流域',
          prop3: 1,
          prop4: 1,
          prop5: 1,
          prop6: 1,
          prop7: 1,
          prop8: 1,
          prop9: 1
        },
        {
          prop1: "安徽省",
          prop2: '淮河流域',
          prop3: 1,
          prop4: 1,
          prop5: 1,
          prop6: 1,
          prop7: 1,
          prop8: 1,
          prop9: 1
        },
        {
          prop1: "安徽省",
          prop2:  '淮河流域',
          prop3: 1,
          prop4: 1,
          prop5: 1,
          prop6: 1,
          prop7: 1,
          prop8: 1,
          prop9: 1
        },
        {
          prop1: "安徽省",
          prop2:  '漕河流域',
          prop3: 1,
          prop4: 1,
          prop5: 1,
          prop6: 1,
          prop7: 1,
          prop8: 1,
          prop9: 1
        },
        {
          prop1: "安徽省",
          prop2:  '漕河流域',
          prop3: 1,
          prop4: 1,
          prop5: 1,
          prop6: 1,
          prop7: 1,
          prop8: 1,
          prop9: 1
        },
        {
          prop1: "湖南省",
          prop2: 1,
          prop3: 1,
          prop4: 1,
          prop5: 1,
          prop6: 1,
          prop7: 1,
          prop8: 1,
          prop9: 1
        },
        {
          prop1: "湖南省",
          prop2: 1,
          prop3: 1,
          prop4: 1,
          prop5: 1,
          prop6: 1,
          prop7: 1,
          prop8: 1,
          prop9: 1
        }
      ],
      detailTabledata:[]
    };
  },
  created() {
   this.$store.commit("setShowlefttree", true);
    let arr=[]
    for(let i=0;i<this.tableData.length;i++){
        let num = this.adda(i,'prop1','sf');
        i+=num-1
    }
    for(let i=0;i<this.tableData.length;i++){
        let num = this.adda(i,'prop2','ly');
        i+=num-1
    }
  },
  methods: {
    adda(inedx,prop,key){
        let name = this.tableData[inedx][prop];
        let row = 0;
        for(let i=inedx;i<this.tableData.length;i++){
          if(name == this.tableData[i][prop]){
            row++
          }else{
            break;
          }
        }
        this.tableData[inedx][key] = row;
        return row
    },
    indexMethod(index) {
      return index + 1;
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 1) {
          if(row.sf){
              return{
                  colspan:1,
                  rowspan:row.sf
              }
          }else{
               return{
                  colspan:1,
                  rowspan:0
              }
          }
      }
       if (columnIndex == 2) {
          if(row.ly){
              return{
                  colspan:1,
                  rowspan:row.ly
              }
          }else{
               return{
                  colspan:1,
                  rowspan:0
              }
          }
      }
    },
    closess(done) {
      done();
    },
  }
};
</script>

<style scoped lang="less">
</style>
